import React, { useRef, useState, useEffect } from 'react'

const APP = () => {
	const [count, setCount] = useState(0)
	const username = useRef()
	// 可以获取到一个 current { current: input }
	const handle = () => console.log(username)

	// 保存数据,组件重新渲染时,数据依旧存在,数据不会丢失
	let timerId = useRef()

	useEffect(() => {
		timerId.current = setInterval(() => {
			setCount((count) => count + 1)
		}, 1000)
	}, [])

	const stopCount = () => {
		clearInterval(timerId.current)
	}

	return (
		<div>
			<input ref={username} onChange={handler} />
			<div>{count}</div>
			<button onClick={stopCount}>停止</button>
		</div>
	)
}

export default APP
